<template>
  <div class="login">
    <div class="container-fluid box">
      <div class="loginBox">
        <div class="loginBoxHeader">
          <p>智慧社区管理平台</p>
        </div>
        <el-form class="loginBox" :model="form">
          <el-form-item label="账号">
            <el-input
              clearable
              placeholder="请输入账号"
              v-model="form.userName"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              clearable
              show-password
              placeholder="请输入密码"
              v-model="form.pwd"
            ></el-input>
          </el-form-item>

          <el-form-item style="text-align: center">
            <el-button class="loginbutton" type="primary" @click="login"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
html,
body,
.login {
  min-width: 1000px;
  height: 100%;
  background-image: url("../assets/images/1.jpg");
  opacity: 0.9;
  background-size: cover;
  background-repeat: no-repeat;
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginbutton {
  background: rgba(17, 90, 179, 0.8);
  font-size: 18px;
}
.box {
  background-color: rgba(42, 223, 233, 0.5);
  width: 485px;
  height: 420px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  text-align: center;
  font-family: 楷体;
  font-size: 16px;

  .loginBoxHeader p {
    border-bottom: 1px solid rgba(255, 242, 124, 0.69);
    font-size: 28px;
    font-family: 楷体;
    color: rgb(253, 253, 253);
  }
  .loginBox {
    width: 80%;
    margin: 0 auto;

    .el-form-item {
      label {
        color: aliceblue;
      }

      .el-button {
        width: 90%;
      }
    }
    .loginMsg {
      span {
        color: rgb(57, 48, 48);
      }
    }
  }
}
</style>
<script>
import router from '@/router';
export default {
  data: function () {
    return {
      form: {
        userName: "",
        pwd: "",
      },
    };
  },
  methods: {
    login: function () {
      this.$axios({
        url: "/smart/user/login",
        method:"post",
        data: this.form,
      }).then((res) => {
        // console.log(res.data);
        if (res.data.code == '2000') {
          sessionStorage.setItem("user", JSON.stringify(res.data.user.user));
          sessionStorage.setItem("token", res.data.user.token);
          
          // 动态路由
          sessionStorage.setItem("userMenus",JSON.stringify(res.data.user.userMenus));
          //console.log('ere',res.data.user.userMenus);
          res.data.user.userMenus.forEach((v)=>{
            if(v.children==null){
              router.addRoute("home",{
                path:v.href,
                component:()=>import(`@/views/${v.component}.vue`),
              });
            }else{
              v.children.forEach((v2)=>{
                if(v2.children==null && v2.href !=null){
                  router.addRoute("home",{
                    path:v2.href,
                    component:()=>import(`@/views/${v2.component}.vue`),
                  })
                }else{
                  if(v2.children){
                    v2.children.forEach((v3)=>{
                      router.addRoute("home",{
                        path:v3.href,
                        component:()=>import(`@/views/${v3.component}.vue`)
                      })
                    })
                  }
                }
              })
            }
          })
          this.$router.replace("/home/PlatformHomepage");

          


        } else {
          // console.log(res);
          this.$router.replace("/");
          this.$message.error("登录失败！");
        }
      });
    },
  },
};
</script>
